<template>
    <div class="nav">
        <img :src="arrow" style="float: left;" @click="goBefore"/>
        <img :src="head" class="headImg">
        <span>{{name}}</span>
        <img :src="share" style="float: right;width: 24px;margin-right: 5px;"/>
    </div>
</template>

<script>
import {useRouter} from 'vue-router'
export default{
    props:['head','name'],
    setup(){
        const arrow=require('../assets/arrow-left.png')
        const share=require('../assets/share.png')
        const router=useRouter()
        const goBefore=()=>{
            router.go(-1)
        }
        return {arrow,share,goBefore};
    }
}
</script>

<style scoped>
.nav{
    width: 360px;
    height: 50px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}
.headImg{
    width: 32px;
    height: 32px;
    border-radius: 32px;
    margin-left: 5px;
    margin-right: 13px;
}
span{
    width: 240px;
    font-size: 16px;
    font-weight: bold;
}
</style>